<template>
	<div class="root">
		<div class="card">
			<div class="chart1">
				<div :class="check==0?'active':'chart'" id="chart1" @click="changeIndex(0)"><img src="http://qnkf.laigl.com/20210420/cursor.png" /></div>
				<span :class="check==0?'fonts_active':'normal'">LV 1</span>
			</div>
			<!-- <div class="chart2">
				<div :class="check==1?'active':'chart'" id="chart2" @click="changeIndex(1)"><img src="http://qnkf.laigl.com/20210420/cursor.png" /></div>
				<span :class="check==1?'fonts_active':'normal'">LV 2</span>
			</div> -->
			<div class="chart3">
				<div :class="check==1?'active':'chart'" id="chart3" @click="changeIndex(1)"><img src="http://qnkf.laigl.com/20210420/cursor.png" /></div>
				<span :class="check==1?'fonts_active':'normal'">LV 2</span>
			</div>
			<!-- <div class="chart4">
				<div :class="check==3?'active':'chart'" id="chart4" @click="changeIndex(3)"><img src="../assets/img/cursor.png" /></div>
				<span :class="check==3?'fonts_active':'normal'">LV 4</span>
			</div> -->
			<div class="chart5">
				<div :class="check==2?'active':'chart'" id="chart5" @click="changeIndex(2)"><img src="http://qnkf.laigl.com/20210420/cursor.png" /></div>
				<span :class="check==2?'fonts_active':'normal'">LV 3</span>
			</div>
			<div class="progress">
				<!-- <img src="../assets/img/cursor.png" :style="'left:'+check*22.5+'%'"/> -->
			</div>
			<div class="opts">
				<van-icon name="arrow-up" size="1.5rem" />
				<p>选择Level</p>
			</div>
		</div>
		<div class="backimg"><img src="http://qnkf.laigl.com/mobilepng/back1.png" alt=""></div>
		<div class="sub-button" @click="godetail()">确定</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				check:0
			}
		},
		methods:{
			changeIndex(id){
				console.log(id)
				this.check = id
			},
			godetail(){
				this.$router.push('./programme?level='+this.check+"&assess_id="+this.$route.query.assess_id)
			}
		}
	}
</script>

<style lang="less" scoped>
	.root{
			width: 100%;
			height: 100vh;
			padding: 2rem;
			overflow: hidden;
			box-sizing: border-box;
			background: url(http://qnkf.laigl.com/mobilepng/questionback.png);
			@keyframes moveArrow {
			    0% {
			        transform: translateY(0);
			        -webkit-transform: translateY(0);
			    }
			    50% {
			        transform: translateY(-1vh);
			        -webkit-transform: translateY(-1vh);
			    }
					100% {
					    transform: translateY(0);
					    -webkit-transform: translateY(0);
					}
			}
			.card{
				width: 86.7vw;
				height: 70vh;
				background: #fff;
				overflow: hidden;
				border-radius: 1rem;
				box-shadow: 0 0 3rem #aaa;
				position: relative;
				background-image: url(../assets/img/levelback.png);
				background-size: 100%;
				background-repeat: no-repeat;
				box-sizing: border-box;
				.progress{
					width: 85%;
					height: 10px;
					background-color: #eceff1;
					border-radius: 5px;
					position: absolute;
					bottom: 10vh;
					left: 7.5%;
					img{
						position: absolute;
						left: 5px;
						width: 30px;
						height: 40px;
						bottom:-14px;
					}
				}
				.opts{
					position: absolute;
					bottom: 1rem;
					left: 50%;
					transform: translateX(-50%);
					text-align: center;
					i{
						animation: 2s moveArrow infinite ease normal;
					}
				}
			}
			
			.fonts_active{
				position: relative;
				color: #fff;
			}
			
			.normal{
				color:#CCD0DB;
				font-weight: 600!important;
			}
			.chart1{
				left: 5%;
			}
			.chart2{
				left: 23%;
			}
			.chart3{
				left: 42%;
			}
			.chart4{
				left: 60%;
			}
			.chart5{
				left: 79%;
			}
			.chart1,.chart2,.chart3,.chart4,.chart5{
				display: inline-block;
				margin:0 .8rem;
				width: 11%;
				text-align: center;
				box-sizing: border-box;
				position: absolute;
				bottom: 15vh;
				.fonts_active{
					color: #fff;
				}
				
				span{
					color: #9AA4B8;
					font-weight: bold;
					position: absolute;
					bottom: 10px;
					width: 100%;
					left: 0;
				}
				.chart{
					position: relative;
					background: linear-gradient(to top,#CCD0DB,#F8F8FA);
					img{
						opacity: 0;
					}
				}
				.active{
					transition: all .5s;
					position: relative;
					background: linear-gradient(to top,#CCD0DB,#F8F8FA);
					img{
						position: absolute;
						bottom: -7vh;
						z-index: 9;
						left: 50%;
						transform: translateX(-50%);
						width: 30px;
						height: 40px;
						opacity: 1;
					}
				}
				.active::after{
					content:'';
					width: 100%;
					border-radius: 0.3rem;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					animation: changeBack .5s cubic-bezier(0.54, 1.41, 1, 1) both;
				}
				@keyframes changeBack{
					0%{
						height: 0;
						background: linear-gradient(to top,#CCD0DB,#F8F8FA);
					}
					100%{
						background: linear-gradient(to top,#0489C4,#1BBFD0);
						height: 100%;
					}
				}
				#chart1{
					width: 100%;
					height: 5rem;
					border-radius:.3rem;
				}
				#chart2{
					width: 100%;
					height: 8rem;
					border-radius:.3rem;
				}
				#chart3{
					width: 100%;
					height: 12rem;
					border-radius:.3rem;
				}
				#chart4{
					width: 100%;
					height: 16rem;
					border-radius:.3rem;
				}
				#chart5{
					width: 100%;
					height: 20rem;
					border-radius:.3rem;
				}
			}
			.backimg{
				margin-top: 1rem;
				width: 100vw;
				margin-left: -2rem;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.sub-button{
				width: 23rem;
				height: 3.8rem;
				box-sizing: border-box;
				background: linear-gradient(to right, #1FCAD1, #0383C4);
				border: none;
				outline: none;
				border-radius: 3rem;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 1.4rem;
			}
		}
	
</style>
